<template>
  <div class="container">
    <div class="app-container">
      <div class="search">
        <el-form class="search-form">
          <el-form-item label="人员搜索：" label-width="120px">
            <el-input
              v-model="pageParams.userName"
              placeholder="请输入"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色：" label-width="80px">
            <el-select
              v-model="pageParams.isRepair"
              style="width: 200px"
              placeholder="请选择"
            >
              <el-option
                v-for="item in roleList"
                :key="item.isRepair"
                :label="item.roleName"
                :value="item.isRepair"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              class="search-btn"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="searchUser"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="list">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column width="80px" label="序号">
            <template v-slot="{ row }"> {{ row.index }} </template>
          </el-table-column>
          <el-table-column prop="userName" label="人员名称"> </el-table-column>
          <el-table-column prop="roleName" label="角色"></el-table-column>
          <el-table-column prop="mobile" label="联系电话"> </el-table-column>
          <el-table-column prop="workCount" label="完成工单（本月）">
          </el-table-column>
          <el-table-column prop="progressTotal" label="进行中工单">
          </el-table-column>
          <el-table-column prop="cancelCount" label="拒绝工单（本月）">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="checkInfo(row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="space-between" style="margin-top: 20px">
          <span class="pageCount"
            >共{{ pageParams.totalCount }}条记录 第{{ pageParams.pageIndex }}/{{
              pageParams.totalPage
            }}页</span
          >
          <el-pagination
            layout="slot"
            :current-page.sync="pageParams.pageIndex"
            :page-size="pageParams.pagesize"
            :total="pageParams.totalPage"
          >
            <el-button
              type="primary"
              :disabled="pageParams.pageIndex === 1 ? true : false"
              class="pagi-btn"
              :class="{ disabled: pageParams.pageIndex === 1 }"
              @click="goPrev"
              >上一页</el-button
            >
            <el-button
              type="primary"
              :disabled="
                pageParams.pageIndex === pageParams.totalPage ? true : false
              "
              :class="{
                disabled: pageParams.pageIndex === pageParams.totalPage,
              }"
              class="pagi-btn"
              @click="goNext"
              >下一页</el-button
            >
          </el-pagination>
        </el-row>
      </div>
      <!-- 弹窗 -->
      <!-- 查看详情 -->
      <el-dialog
        title="设备详情"
        :visible="showInfoDialog"
        width="630px"
        @close="showInfoDialog = false"
      >
        <div class="info-title">
          <div class="title-item">人员名称：{{ userStatus.userName }}</div>

          <div class="title-item">角色：{{ userStatus.roleName }}</div>

          <div class="title-item">联系电话：{{ userStatus.mobile }}</div>

          <div class="title-item">负责区域：{{ userStatus.regionName }}</div>
        </div>
        <div class="table">
          <table>
  <thead>
    <tr>
      <th></th>
      <th>总工单数</th>
      <th>拒绝工单</th>
      <th>完成工单</th>
      <th>进行中工单</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>本周</td>
      <td>{{week.total}}</td>
      <td>{{week.cancelCount}}</td>
      <td>{{week.workCount}}</td>
      <td>{{week.progressTotal}}</td>
    </tr>
    <tr>
      <td>本月</td>
      <td>{{month.total}}</td>
      <td>{{month.cancelCount}}</td>
      <td>{{month.workCount}}</td>
      <td>{{month.progressTotal}}</td>
    </tr>
    <tr>
      <td>本年</td>
      <td>{{year.total}}</td>
      <td>{{year.cancelCount}}</td>
      <td>{{year.workCount}}</td>
      <td>{{year.progressTotal}}</td>
    </tr>
  </tbody>
</table>

        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { searchUserWorkApi, getUserInfoApi, getTaskuserWorkApi } from "@/api/user";
import { yearRangeApiSecF, dateRangeApiSecF, weekRangeApiSecF } from '@/utils/time'
export default {
  components: {},
  data() {
    return {
      tableData: [],
      title: "",
      roleList: [
        { roleName: "运营员", isRepair: false },
        { roleName: "维修员", isRepair: true },
      ],
      UserNow: {},
      userStatus: {},
      week:{},
      month:{},
      year:{},
      showInfoDialog: false,
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        totalCount: 0,
        userName: "",
        isRepair: "",
      },
    };
  },
  created() {
    this.searchUser();
  },
  methods: {
    // 搜索
    async searchUser() {
      const res = await searchUserWorkApi({
        ...this.pageParams,
      });
      this.tableData = [...res.currentPageRecords];
      this.pageParams.pageIndex = +res.pageIndex;
      this.pageParams.pageSize = +res.pageSize;
      this.pageParams.totalPage = +res.totalPage;
      this.pageParams.totalCount = +res.totalCount;

      // 序号
      let pageNow = this.pageParams.pageIndex;
      this.tableData.forEach((item, index) => {
        this.$set(
          item,
          "index",
          pageNow > 1 ? (pageNow - 1) * 10 + index + 1 : index + 1
        );
      });
    },

    async checkInfo(row) {
      // console.log(row);
      this.userStatus = await getUserInfoApi(row.userId);
      this.week = await getTaskuserWorkApi({userId:row.userId,start:weekRangeApiSecF.start,end:weekRangeApiSecF.end})
      this.month = await getTaskuserWorkApi({userId:row.userId,start:dateRangeApiSecF.start,end:dateRangeApiSecF.end})
      this.year = await getTaskuserWorkApi({userId:row.userId,start:yearRangeApiSecF.start,end:yearRangeApiSecF.end})
      // console.log(this.userStatus);
      console.log(this.week);
      console.log(this.month);
      console.log(this.year);
      this.UserNow = row;
      this.showInfoDialog = true;
    },

    // 上一页
    goPrev() {
      this.pageParams.pageIndex--;
      this.searchUser();
    },
    // 下一页
    goNext() {
      this.pageParams.pageIndex++;
      this.searchUser();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f8fafd;
  padding: 20px;
  .search {
    background-color: #fff;
    display: flex;
    height: 64px;
    align-items: center;
    padding-top: 23px;
    margin-bottom: 20px;
    .search-form {
      display: flex;
      align-items: center;
      .search-btn {
        background-color: #5f84ff;
        border: none;
        margin-left: 15px;
        font-size: 16px;
        height: 36px;
        width: 80px;
        text-align: center;
        padding: 0;
      }
    }
  }
  .list {
    padding: 20px;
    background-color: #fff;

    .btns {
      margin-bottom: 15px;
    }
    .add-btn {
      width: 80px;
      text-align: center;
      padding: 12px 0px;
      background-color: #ff8035;
      border: none;
      font-size: 14px;
    }
    .setting-btn {
      border: none;
      background-color: #fbf4f0;
      color: #716762;
      width: 80px;
      text-align: center;
      padding: 12px 0px;
    }
    .pageCount {
      color: #dbdfe5;
      margin-left: 10px;
    }
  }
  .pagi-btn {
    background-color: #d5ddf8;
    color: #606266;
    width: 70px;
    height: 32px;
    text-align: center;
  }
  .disabled {
    background-color: #eceff8;
    color: #d2d7dd;
  }
  .del {
    color: #ff5a5a;
  }
}
.info-title {
  width: 579px;
  height: 88px;
  background-color: #f4f6fb;
  display: flex;
  padding-top: 20px;
  padding-left: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
  .title-item{
    width: 180px;
  }
}
table {
    border-collapse: collapse;
    width: 575px;
    margin-top: 20px;
  }
  th, td {
    width: 115px;
    height: 40px;
    border: 1px solid #d8dde3;
    text-align: center;
  }
  th{
    background-color: #f7f8fd;
    font-weight: 400;
  }
</style>
